<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="echarts.min.js" charset="utf-8"></script>
</head>

<body>
   <div>
     <div id="chart">
       <div id="main" style="width: 100%;height:600px;"></div>
     </div>
   </div>
    <!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" charset="utf-8"></script> -->
    <script type="text/javascript">
        /**
        *selectid String 必传 选择器Id
        *xAxisData: Array 必须 X轴的数组，这里指时间轴数组
        *dataArr:Array 必须 是二维数组
        *nameArr: Array 必须 选择项数组  例如：['全国总代','一级代理']  和dataArr的长度是一样的   必须相同
        */
        function showMutiBar(selectid,nameArr,dataArr,xAxisData) {
            var colorArr = ['#ea775a','#c0392b','#4b9add','#2980b9','#ffa95c','#f39c12','#4ec87f','#27ae60','#c979d2','#e6a4ee','#fff772','#fffcd1','#e32653','#ff6b8e','#f1bd40','#ffdf92','#f16640','#fd9477','#50cbda','#86e7f2','#4a99db','#84c7ff','#5fd348','#89f673','#3ac4a2','#58e7c4','#ffa95c','#ffcda1'];
            var seriesArrToBackend = [];
            var j = 1;
            for (var i = 0; i < nameArr.length; i++) {
              seriesArrToBackend[i] = {
                name:nameArr[i],
                type:'bar',
                data:dataArr[i],
                itemStyle:diffItemStyle(colorArr[i]),
              }
              if(i > 1 && (i % 2 == 0)) {j += 1};
              seriesArrToBackend[i].stack = j;
            }
            // console.log(seriesArrToBackend);
            var option = {
                backgroundColor: '#eee',
                legend: {
                    orient:'vertical',
                    data: nameArr,
                    align: 'left',
                    left: 10
                },
                tooltip: {},
                xAxis: {
                    data: xAxisData,
                    name: '时间',
                    silent: false,
                    axisLine: {
                        onZero: true
                    },
                    splitLine: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    }
                },
                grid: {
                    left: 160,
                },
                yAxis: {
                    name: '代理人数',
                    inverse: false,
                    splitArea: {
                        show: false
                    }
                },
                series: seriesArrToBackend
            };
            var myChart = echarts.init(document.getElementById(selectid));
            myChart.on('brushSelected', renderBrushed);
            function renderBrushed(params) {
                var brushed = [];
                var brushComponent = params.batch[0];
                for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                    var rawIndices = brushComponent.selected[sIdx].dataIndex;
                    brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
                }
            }
            function diffItemStyle(color) {
                var itemStyle = {
                    normal: {color: color},
                    emphasis: {
                        barBorderWidth: 1,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                };
                return itemStyle;
            }
            myChart.setOption(option);
        }
        var nameArr = ['新开--全国总代', '升级--全国总代', '新开--一级代理', '升级--一级代理', '新开--二级代理', '升级--二级代理', '新开--三级代理', '升级--三级代理'];
        var dataArr = [[],[],[],[],[],[],[],[]];
        var xAxisData = [];
        for (var i = 0; i < 8; i++) {
            xAxisData.push('2017-07-0' + i);
            dataArr[0].push((Math.random() * 2).toFixed(2));
            dataArr[1].push(Math.random().toFixed(2));
            dataArr[2].push((Math.random() * 5).toFixed(2));
            dataArr[3].push((Math.random() + 0.3).toFixed(2));
            dataArr[4].push((Math.random() + 0.3).toFixed(2));
            dataArr[5].push((Math.random() + 0.3).toFixed(2));
            dataArr[6].push((Math.random() + 0.3).toFixed(2));
            dataArr[7].push((Math.random() + 0.3).toFixed(2));
        }
        showMutiBar('main',nameArr,dataArr,xAxisData);
        window.onresize = function () {
          document.getElementById('bar').innerHTML = '<div id="main" style="width: 100%;height:600px;"></div>';
          showMutiBar('main',nameArr,dataArr,xAxisData);
        }
    </script>
</body>

</html>
